<template>
	<view class="wrapper">
		<view class="tab-top">
			<u-tabs-swiper ref="tabs" :current="current" active-color="#F70000" @change="tabsChange" :list="list" :is-scroll="false"></u-tabs-swiper>
			<view class="tab-bot">
				<view @click="selPicker" class="tab-type">
					<text>{{selType}}</text>
					<image src="../../static/images/xia.png" mode="aspectFill"></image>
				</view>
				<view @click="allBtn" class="all-btn">
					{{current==1?'一键上架':'一键下架'}}
				</view>
				<view class="search">
					<input v-model="search" @input="inputChange" type="text" placeholder="搜索" />
					<view @click="searchBtn" class="text">
						搜索
					</view> 
				</view>
			</view>
		</view>
		<u-picker mode="selector" v-model="isPicker" @confirm="confirm" :default-selector="[0]"  :range="selector" range-key="cate_name"></u-picker>
		<view v-if="goodsList" class="goods-list">
			<view v-for="(item,index) in goodsList" :key="index"  class="goods">
				<image :src="item.goods_image" mode="aspectFit"></image>
				<view class="goods-r">
					<view class="tit">
						{{item.goods_name}}
					</view>
					<view class="bot">
						<view class="pirce">
							{{item.price}}
						</view>
						<view @click.stop="botBtn(item.status,item.goods_id)" class="bot-btn">
							{{item.status==2?'上架':'下架'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="goodsList.length==0" class="no-more">
			暂无数据
		</view>
		
		<!-- 提示窗 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:'',
				num:Math.random(),
				id:0,
				list:[{
					name:'上架'
				},{
					name:'下架'
				}],
				current:0,
				isPicker:false,//显示选择器
				selector:null,
				selType:'全部',//分类
				cate_id:'',//分类id
				search:'',//搜索值
				goodsList:[],//商品列表
				page:1,//页数
				isMore:true,//更多
				oldSearch:'',//搜索久
			}
		},
		onLoad(e) {
			// this.id = e.id
			// this.id = 9
		},
		onShow(){
			this.imgUrl = this.api.imgUrl
			this.getTypeList()
			this.page=1
		},
		onReachBottom(){
			console.log(3333)
			if(this.isMore){
				this.page++
				this.getGoodList(this.current+1,this.search,this.cate_id,this.page)
			}
		},
		methods: {
			// 获取分类
			getTypeList(){
				this.api._post('Goods/getGoodsCateLists').then(res=>{
					console.log(res)
					res.data.unshift({
						cate_id: "",
						cate_name: "全部"
					})
					this.selector = res.data
					this.getGoodList(this.current+1,this.search,this.cate_id,this.page)
				})
			},
			// 获取列表
			getGoodList(status,keys,cate_id,page){
				this.api._post('Goods/getGoodsLists',{
					status,
					keys,
					cate_id,
					page,
					size:10
				}).then(res=>{
					console.log(res)
					this.oldSearch = this.search
					if(res.data){
						if(res.data.length>9){
							this.isMore=true
						}else{
							this.isMore=false
						}
						if(page==1){
							this.goodsList = res.data
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 0
							});
						}else{
							res.data.forEach((item,index)=>{
								this.goodsList.push(item)
							})
						}
					}else{
						this.goodsList = []
					}
				})
			},
			// 选项卡
			tabsChange(e){
				if(this.current != Number(e)){
					this.page=1
					this.current = Number(e)
					this.getGoodList(this.current+1,this.search,this.cate_id,this.page)
				}
			},
			// 查看详情
			toDetail(){
				uni.navigateTo({
					url:'./detail'
				})
			},
			// 打开选择器
			selPicker(){
				this.isPicker=true
			},
			// 选择器选中
			confirm(e){
				// this.selector
				console.log(e,this.selector)
				this.page = 1
				this.selType = this.selector[e[0]].cate_name
				this.cate_id = this.selector[e[0]].cate_id
				this.getGoodList(this.current+1,this.search,this.cate_id,this.page)
			},
			// 搜索
			searchBtn(){
				console.log(this.oldSearch,this.search)
				if(this.search&&this.oldSearch!=this.search){
					this.page=1
					this.getGoodList(this.current+1,this.search,this.cate_id,this.page)
				}
			},
			// 监听搜索框没有内容时
			inputChange(){
				if(!this.search){
					this.page=1
					this.getGoodList(this.current+1,this.search,this.cate_id,this.page)
				}
			},
			// 上架下架
			botBtn(status,goods_id){
				
				console.log(status,status==1)
				if(status==1){
					status=2
				}else{
					status=1
				}
				this.api._post('Goods/goodsDropoff',{
					status,
					goods_id:goods_id.toString(),
				}).then(res=>{
					if(res.status==200){
						this.$refs.uToast.show({
							title: res.message,
							type: 'success',
						})
						this.page=1
						this.getGoodList(this.current+1,this.search,this.cate_id,this.page)
					}else{
						this.$refs.uToast.show({
							title: res.message, 
							type: 'error',
						})
					}
				})
			},
			// 一键上下架
			allBtn(){
				console.log(this.goodsList)
				if(this.goodsList&&this.goodsList.length>0){
					let arr = [];
					this.goodsList.forEach((item,index)=>{
						arr.push(item.goods_id)
					})
					if(this.current==0){
						this.botBtn(1,arr)
					}else{
						this.botBtn(2,arr)
					}
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import url('../../common/common.css');
	.wrapper {
		// position: absolute;
		// top: 0;
		// left: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100%;
		// padding-bottom: 150upx;
		padding-top: 150upx;
		box-sizing: border-box;
	}
	.tab-top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 150upx;
		background: #FFFFFF;
		z-index: 10;
	}
	.tab-bot{
		width: 100%;
		height: 70upx;
		display: flex;
		justify-content:space-around;
		align-items: center;
		.tab-type{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			// margin-left: 20upx;
			>text{
				max-width: 200upx;
				font-size: 30upx;
				color: #333333;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			>image{
				width: 26upx;
				height: 14upx;
				margin-left: 10upx;
			}
		}
		.all-btn{
			color: #F70000;
			font-size: 30upx;
		}
		.search{
			width: 300upx;
			height: 96%;
			display: flex;
			justify-content: center;
			align-items: center;
			>input{
				width: 70%;
				height: 100%;
				padding: 10upx;
				box-sizing: border-box;
				font-size: 30upx;
				border: 1upx solid #EEEEEE;
			}
			.text{
				width: 30%; 
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				background: #FA3534;
				color: #FFFFFF;
			}
		}
	}
	.goods-list{
		width: 100%;
		border-top: 5upx solid #EEEEEE;
		padding-top:30upx ;
		.goods{
			width: 90%;
			margin: 0 auto 20upx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			>image{
				width:250upx;
				height:200upx;
				background:rgba(240,240,240,1);
				border-radius:6upx;
			}
			.goods-r{
				width: 410upx;
				height: 200upx;
				padding: 10upx 0 0;
				box-sizing:border-box;
				margin-left: 23upx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-direction: column;
				.tit{
					width: 100%;
					height: 70upx;
					font-size:26upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.bot{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 10upx;
					border-bottom: 1upx solid #EEEEEE;
					.pirce{
						font-size:36upx;
						font-family:PingFang SC;
						font-weight:bold;
						color:rgba(247,0,0,1);
					}
					.bot-btn{
						width:120upx;
						height:46upx;
						background:rgba(247,0,0,1);
						border-radius:23upx;
						text-align: center;
						line-height: 46upx;
						font-size:28upx;
						font-family:PingFang SC;
						font-weight:500;
						color:rgba(255,255,255,1);
					}
				}
			}
		}
	}
	.no-more{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
		color: #C8C8C8;
		// margin-top: 30upx;
	}
</style>
